import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    infoList: [],
    // 文本框的内容
    inputValue: "aaa",
    viewKey: "all",
  },
  mutations: {
    initList(state, list) {
      state.infoList = list;
    },
    // 为store中的inputValue赋值
    setInputValue(state, value) {
      state.inputValue = value;
    },
    // 增加infoList列表项
    addItem(state) {
      state.infoList.push({
        id: state.infoList.length - 1,
        info: state.inputValue.trim(),
        done: false,
      });
      state.inputValue = "";
    },
    //根据id删除infoList列表项
    deleteItem(state, id) {
      state.infoList = state.infoList.filter((item) => item.id !== id);
    },
    //根据id修改复选框的状态
    changeCheckBox(state, params) {
      // 法1：
      // state.infoList = state.infoList.map((item) => {
      //   if (item.id === params.id) item.done = params.status;
      //   return item;
      // });
      // 法2：
      const index = state.infoList.findIndex((item) => item.id === params.id); //找到符合条件的那一项的索引值
      // 有则返回索引值 没有则返回-1
      if (index !== -1) state.infoList[index].done = params.status;
    },
    // 清理已完成
    clearDone(state) {
      state.infoList = state.infoList.filter((item) => !item.done);
    },
    // 全部、已完成、未完成显示
    changeViewKey(state, key) {
      state.viewKey = key;
    },
  },
  actions: {
    //  获取异步的数据 context表示当前的store的实例 可以通过 context.state 获取状态 也可以通过context.commit 来提交mutations， 也可以 context.diapatch调用其他的action
    getList(context) {
      axios.get("/list.json").then(({ data }) => {
        // console.log(data);
        context.commit("initList", data);
      });
    },
  },
  getters: {
    // 统计未完成的条数
    unDoneLength(state) {
      return state.infoList.filter((item) => !item.done).length;
    },
    List(state) {
      if (state.viewKey === "all") {
        return state.infoList;
      } else if (state.viewKey === "undone") {
        return state.infoList.filter((item) => !item.done);
      } else {
        return state.infoList.filter((item) => item.done);
      }
    },
  },
  modules: {},
});
